<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
    <script src="./js/jquery-1.9.1.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var id_index = 1001;
        var p1 = {
            "employeeId": id_index, "name": "张三", "sex": "女", "password": "1234", "age": 29, "birthday": "1991-1-1"
        };
        id_index++;
        var p2 = {
            "employeeId": id_index, "name": "李四", "sex": "男", "password": "1234", "age": 28, "birthday": "1992-2-2"
        };
        id_index++;
        var p3 = {
            "employeeId": id_index, "name": "王五", "sex": "女", "password": "1234", "age": 27, "birthday": "1993-3-3"
        };
        id_index++;
        var p4 = { "employeeId": id_index, "name": "赵六", "sex": "女", "password": "1234", "age": 26, "birthday": "1993-3-3" };
        id_index++;
        var persons = [p1, p2, p3, p4];

        function showPersons() {
            var tb1 = $("#tb1");
            var str = "<thead><th>序号</th><th>工号</th><th>姓名</th><th>性别</th><th>密码</th><th>年龄</th><th>出生日期</th></thead>";
            for (var i = 0; i < persons.length; i++) {
                var p = persons[i];
                if (i % 2 == 0) {
                    str += "<tr class='active'><td><input type='checkbox' class = 'ids' value='" + p.employeeId + "'></td><td>"
                        + p.employeeId + "</td><td>"
                        + p.name + "</td><td>"
                        + p.sex + "</td><td>"
                        + p.password + "</td><td>"
                        + p.age + "</td><td>"
                        + p.birthday + "</td></tr>";
                } else {
                    str += "<tr class='warning'><td><input type='checkbox' class = 'ids' value='" + p.employeeId + "'></td><td>"
                        + p.employeeId + "</td><td>"
                        + p.name + "</td><td>"
                        + p.sex + "</td><td>"
                        + p.password + "</td><td>"
                        + p.age + "</td><td>"
                        + p.birthday + "</td></tr>";
                }

            }
            tb1.html(str);
        }

        // 显示单个员工数据的方法
        function showPerson() {
            var employeeId = $("#employeeId").val();
            var pname = $("#name").val();
            var tb1 = $("#tb1");
            if (employeeId == '' && pname == '') {
                showPersons();
                return;
            }
            // 找到要更新的数据
            for (var i = 0; i < persons.length; i++) {
                if (employeeId != '' && pname != '' && persons[i].employeeId == employeeId && persons[i].name == pname) {
                    var p = persons[i];
                    var str = "<thead><th>序号</th><th>工号</th><th>姓名</th><th>性别</th><th>密码</th><th>年龄</th><th>出生日期</th></thead>";
                    str += "<tr class='info'><td><input type='checkbox' class = 'ids' value='" + p.employeeId + "'></td><td>"
                        + p.employeeId + "</td><td>"
                        + p.name + "</td><td>"
                        + p.sex + "</td><td>"
                        + p.password + "</td><td>"
                        + p.age + "</td><td>"
                        + p.birthday + "</td></tr>";

                    tb1.html(str);
                    return;
                }
                if (employeeId != '' && pname == '' && persons[i].employeeId == employeeId) {
                    var p = persons[i];
                    var str = "<thead><th>序号</th><th>工号</th><th>姓名</th><th>性别</th><th>密码</th><th>年龄</th><th>出生日期</th></thead>";
                    str += "<tr class='info'><td><input type='checkbox' class = 'ids' value='" + p.employeeId + "'></td><td>"
                        + p.employeeId + "</td><td>"
                        + p.name + "</td><td>"
                        + p.sex + "</td><td>"
                        + p.password + "</td><td>"
                        + p.age + "</td><td>"
                        + p.birthday + "</td></tr>";

                    tb1.html(str);
                    return;
                }
                if (employeeId == '' && pname != '' && persons[i].name == pname) {
                    var p = persons[i];
                    var str = "<thead><th>序号</th><th>工号</th><th>姓名</th><th>性别</th><th>密码</th><th>年龄</th><th>出生日期</th></thead>";
                    str += "<tr class='info'><td><input type='checkbox' class = 'ids' value='" + p.employeeId + "'></td><td>"
                        + p.employeeId + "</td><td>"
                        + p.name + "</td><td>"
                        + p.sex + "</td><td>"
                        + p.password + "</td><td>"
                        + p.age + "</td><td>"
                        + p.birthday + "</td></tr>";

                    tb1.html(str);
                    return;
                }
                tb1.html("未找到相关员工");
            }
        }

        //添加用户
        function addPerson() {

            var pname = $("#pname");
            var sex = $("#sex");
            var age = $("#age");
            var password = $("#password");
            var pbirth = $("#pbirth");
            var employeeId = id_index;
            id_index++;
            var p = {
                "employeeId": employeeId, "name": pname.val(), "password": password.val(), "sex": sex.val(),
                "age": age.val(), "birthday": pbirth.val()
            };
            persons.push(p);
            close()
        }
        //删除用户
        function deletePerson() {
            var count = 0;
            var pids = [];
            var ids = $(".ids");
            for (var i = 0; i < ids.length; i++) {
                if (ids[i].checked) {
                    count++;

                }
            }

            //判断是否选择了需要删除的员工序号
            if (count == 0) {
                alert("请选择要删除的员工序号");
                return false;
            }
            var con = window.confirm("确定要删除这条数据吗？");
            for (var i = 0; i < persons.length; i++) {//遍历所有员工信息

                if (con == true) {
                    if (ids[i].checked) {//如果该行对应的序号被选中,则删除
                        delete persons[i];
                        id_index--;
                    }
                }
            }
            //删除后去null值
            for (var i = 0; i < persons.length; i++) {
                if (persons[i] == '' || persons[i] == null || typeof
                    (persons[i]) == undefined) {
                    persons.splice(i, 1);
                    i = i - 1;
                }
            }
            showPersons();
        }

        // 显示数据方法
        function showUpdateForm() {

            var count = 0;
            var index = 0;
            var ids = $(".ids:checked");
            

            //判断是否选择了一个复选框,是则获取选择的工号
            if (ids.length != 1) {
                alert("请选择要编辑的员工序号");
                return false;
            } else {
                var employeeId = ids[0].value;
            }

            // 找到要更新的数据
            for (var i = 0; i < persons.length; i++) {
                if (persons[i].employeeId == employeeId) {
                    var p = persons[i];
                    $('#myModal').modal('show');
                    // 将获取到的数据显示到form表单中的元素
                    $("#eid").val(p.employeeId);
                    $("#pname").val(p.name);
                    $("#sex").val(p.sex);
                    $("#password").val(p.password);
                    $("#age").val(p.age);
                    $("#pbirth").val(p.birthday);
                    return;
                }
            }
        }



        //保存新增员工数据或者修改已有员工信息
        function saveOrUpdatePerson() {
            var employeeId = $("#eid").val();
            if (employeeId != '') {
                updatePerson(employeeId)
            } else {
                addPerson()
            }
        }
        //修改显示出来的数据并更新
        function updatePerson(pid) {
            var p = {};
            p.employeeId = pid;
            p.name = $("#pname").val();
            p.age = $("#age").val();
            p.sex = $("#sex").val();
            p.password = $("#password").val();
            p.birthday = $("#pbirth").val();
            for (var i = 0; i < persons.length; i++) {
                if (persons[i].employeeId == p.employeeId) {
                    persons[i] = p;
                }
            }
            close()
        }

        //清空数据
        function clearPerson() {
            $("#eid").val("");
            $("#pname").val("");
            $("#age").val("");
            $("#password").val("");
            $("#sex").val("");
            $("#pbirth").val("");
        }
        //关闭
        function close() {
            $('#myModal').modal('hide');
            clearPerson();
            showPersons();
        }

        $(document).ready(function () {
            showPersons();

        })
    </script>
</head>

<body>
    <div style="margin: 15px;color: #948880;font-size: 20px">
        习题
    </div>
    <div style="margin: 15px;">
        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
        <button type="button" class="btn btn-info btn-sm" onclick="deletePerson();">删除</button>
        <button type="button" class="btn btn-info btn-sm" onclick="showUpdateForm();">编辑</button>
        <button type="button" class="btn btn-info btn-sm" onclick="showPerson()">查询</button>
        <input type="text" id="employeeId" placeholder="按工号查询" style="width:75px">
        <input type="text" id="name" placeholder="按姓名查询" style="width:75px">

    </div>

    <div class="table-responsive">
        <table class="table" id="tb1"></table>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加员工信息</h4>
                    <button type="button" class="close" data- dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" method="post" onsubmit="saveOrUpdatePerson();return false;">
                        <input id="eid" hidden="hidden" />
                        <!--required="required" 提交前必须填写-->
                        请输入员工姓名：<input class="form-control" id="pname" type="text" /><br />
                        请输入员工性别：
                        <select class="form-control" id="sex">
                            <option value="">--请选择--</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select><br />
                        请输入密码：<input class="form-control" id="password" type="password" required="required" /><br />
                        请输入人员年龄：<input class="form-control" id="age" type="number" required="required" /><br />
                        请输入人员出生日期：<input class="form-control" id="pbirth" type="text" placeholder="例:20xx-x-x"/><br />
                        <button class="btn btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-floppy-saved"></span>保存</button>
                        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-remove"></span>关闭</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>